<template>
  <div class="body">
    <div class="switchCalendar">
      <div class="boxItem">
        <div class="boxs transformBox" :class="extraClasses">
          <div class="box box1">
            <div class="outside">
              <span v-if="state">{{ number }}</span>
            </div>
          </div>
          <div class="box box4">
            <div class="outside">
              <span v-if="state">{{ nextNumber }}</span>
            </div>
          </div>
        </div>
        <div class="boxs staticBox">
          <div class="box box2">
            <div class="outside">
              <span v-if="state">{{ nextNumber }}</span>
            </div>
          </div>
          <div class="box box3">
            <div class="outside">
              <span v-if="state">{{ number }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SwitchCalendar',
  props: {
    number: {
      type: [Number, String],
      default: 0
    },
    nextNumber: {
      type: [Number, String],
      default: 0
    },
    state: {
      type: Boolean,
      default: true
    }
  },
  data: function() {
    return {
      extraClasses: ''
    };
  },
  watch: {
   state() {
    if (this.state) {
     this.init();
    }
   }
  },
  mounted() {},
  methods: {
    init() {
      setInterval(() => {
        this.extraClasses = '';
        setTimeout(() => {
          this.extraClasses = 'box-animation';
        }, 1000);
      }, 5000);
    }
  }
};
</script>

<style lang="less" scoped>
.box1 {
  background: url("../assets/a2.png");
  background-size: 100% 100%;
}
.box2 {
  background: url("../assets/a2.png");
  background-size: 100% 100%;
}
.box3 {
  background: url("../assets/a1.png");
  background-size: 100% 100%;
}
.box4 {
  background: url("../assets/a1.png");
  background-size: 100% 100%;
}
.body {
  width: 58px;
  height: 82px;
  .auto {
    font-size: 25px;
    font-weight: 800;
    text-align: center;
    background: linear-gradient(to right, red, blue);
    -webkit-background-clip: text;
    color: transparent;
    margin-bottom: 20px;
  }
  .switchCalendar {
    display: flex;
    justify-content: space-between;
    .boxItem {
      position: relative;
      width: 100%;
      height: 82px;

      .boxs {
        position: absolute;
        width: 100%;
        height: 82px;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        .box {
          width: 100%;
          height: 41px;
          overflow: hidden;
          font-family: YouSheBiaoTiHei;
          font-size: 46px;
          color: #01fffe;
          line-height: 82px;
          // background: red
        }
        .box:first-child {
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
        }
        .box:last-child {
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
        }
      }
      .transformBox {
        z-index: 2;
      }
      .staticBox {
        z-index: 1;
      }
      .box-animation {
        .box1 {
          animation: box1 0.8s ease-in infinite;
          animation-iteration-count: 1;
        }
        .box4 {
          animation: box4 0.8s ease-in infinite;
          animation-iteration-count: 1;
        }
      }

      .outside {
        // span-align: center;
        text-align: center;
        span {
          // line-height: 300px;
          font-size: 46px !important;
        }
      }
      .box1 {
        transform-origin: bottom; //bottom：指定原点的纵坐标为bottom
        -webkit-transform-origin: bottom;
        transform: rotateX(0deg);
        backface-visibility: hidden; //隐藏被旋转的 div 元素的背面
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
      }
      @keyframes box1 {
        0% {
          transform: rotateX(0deg);
        }
        10% {
          transform: rotateX(0deg);
        }
        60% {
          transform: rotateX(-90deg);
        }
        100% {
          transform: rotateX(-90deg);
        }
      }
      .box4 {
        transform-origin: top; //top：指定原点的纵坐标为top
        -webkit-transform-origin: top;
        transform: rotateX(90deg);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
      }
      @keyframes box4 {
        0% {
          transform: rotateX(90deg);
        }
        60% {
          transform: rotateX(90deg);
        }
        100% {
          transform: rotateX(0deg);
        }
      }
      .box3 {
        .outside {
          transform: translateY(-50%);
          span {
            transition: all 0.5;
          }
        }
      }
      .box4 {
        .outside {
          transform: translateY(-50%);
          span {
            transition: all 0.5;
          }
        }
      }
    }
  }
}
</style>
